<template>
    <el-menu :default-active="activeIndex"
             class="el-menu-vertical-demo"
             @open="handleOpen"
             @close="handleClose"
             mode="horizontal"
             text-color="rgb(64, 84, 119)"
             active-text-color="rgb(68, 117, 223)"
            style="background-color: white">
        <el-menu-item class="menuItem" index="1" @click="toMain()">
            <div v-bind:class="{ 'menuclick': (pageIndex === '1') }" class="display-column">
                <img v-show="pageIndex !== '1'" src="../../assets/image/phoneLogo1.png">
                <img v-show="pageIndex === '1'" src="../../assets/image/phoneLogo1-act.png"><p>通知提醒</p></div>
        </el-menu-item>
        <el-menu-item class="menuItem" index="2" @click=toUnread>
            <div v-bind:class="{ 'menuclick': (pageIndex === '2') }" class="display-column">
                <img v-show="pageIndex !== '2'" src="../../assets/image/phoneLogo2.png">
                <img v-show="pageIndex === '2'" src="../../assets/image/phoneLogo2-act.png"><p>未读通知</p></div>
        </el-menu-item>
        <el-menu-item class="menuItem" index="3" @click=toMessage>
            <div v-bind:class="{ 'menuclick': (pageIndex === '3') }" class="display-column">
                <img v-show="pageIndex !== '3'" src="../../assets/image/phoneLogo3.png">
                <img v-show="pageIndex === '3'" src="../../assets/image/phoneLogo3-act.png"><p>待交征集</p></div>
        </el-menu-item>
        <el-menu-item class="menuItem" index="4" @click=toCLiHomePage>
            <div v-bind:class="{ 'menuclick': (pageIndex === '4') }" class="display-column">
                <img v-show="pageIndex !== '4'" src="../../assets/image/phoneLogo4.png">
                <img v-show="pageIndex === '4'" src="../../assets/image/phoneLogo4-act.png"><p>退出</p></div>
        </el-menu-item>
    </el-menu>
</template>

<script>
    import Cookies from 'js-cookie'
    export default {
        name: "ph_menu",
        props:{
            pageIndex: {
                type: String
            }
        },
        data () {
            return {
                activeIndex: "1",
                id:'',

                /**
                 *  '0': 管理员
                 *  '1'：普通用户
                 * */
                type: Cookies.get('type'),
            }
        },
        mounted:function () {
            this.activeIndex = this.pageIndex
        },
        methods:{
            handleOpen(key, keyPath) {
                console.log(key, keyPath);
            },
            handleClose(key, keyPath) {
                console.log(key, keyPath);
            },
            toUnread(){
                this.$router.push({path: '/phone/unread'})
            },
            toMessage() {
                this.$router.push({path: '/phone/message'})
            },
            toCLiHomePage(){
                this.$router.push({path: '/phone'})
            },
            toMain(){
                this.$router.push({path: `/phone/main`});
            },
        }
    }
</script>

<style scoped>
    .el-menu-vertical-demo{
        text-align:center;
        width: 100%;
        height: 60px;
        background: black;
    }

    .menuItem{
        width: 25%;
    }

    .logo{
        width: 40px;
        height: 40px;
    }

    .display-column{
        display: flex;
        flex-direction:column;
        align-content:center;
    }

    .display-column img{
        align-self:center;
        flex-basis:auto;
        height: 25px;
        width: 25px;
        margin-top: 6px;
    }

    .display-column p{
        align-self:center;
        flex-basis:auto;
        margin-top: -15px;
    }


    .column-top {
        height: 10%;
    }

    .column-bottom {
        height: 90%;
    }

</style>
